<!-- 框选查询 -->
<script setup lang="jsx">
import { toRefs, ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
import { CloseBold } from '@element-plus/icons-vue';
import { ElTableV2, ElAutoResizer, ElButton, ElIcon, ElMessage } from 'element-plus';
import { bbox as turfBbox } from '@turf/turf';
// import { exportExcel } from '@/common/common-helper';
import { GET_MAPBOX_MAP } from '@/utils/map-utils';

const BaseLayerName = 'buffer-polygon';
const xBLayerName = 'buffer-polygon-xblayer';
const props = defineProps({
  resultFeatures: {
    type: Array,
    default: () => {
      return [];
    },
  },
  polygonShow: Boolean,
});
const checked = ref(0);
const { resultFeatures, polygonShow } = toRefs(props);
const emit = defineEmits(['close']);
let dataSource = [];
const isShow = ref(false);
let columns = [];

// 更改本身图层 isShow 控制是否显示，暂时当分析没有数据时不展示
const changeBaseLayer = (url, isShow) => {
  let map = GET_MAPBOX_MAP();
  let source = map.getSource(BaseLayerName);

  if (source) {
    source.setTiles([url]);
    map.setLayoutProperty(BaseLayerName, 'visibility', isShow ? 'visible' : 'none');
  } else {
    if (isShow) {
      map.addSource(BaseLayerName, { type: 'raster', tiles: [url] });
      map.addLayer({
        id: BaseLayerName, // 唯一 id （必填）
        type: 'raster', // 类型（必填）
        source: BaseLayerName, // 数据源的名称（除了 layer 的 type 为 background 外，source 必填）
        'source-layer': 'source-layer-name', // 数据源的图层（只有数据源 source 的 type 为 vector 时，才能设置 source-layer，其他类型的不可以设置）
        minzoom: 0, // 最小层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时，layer 将被隐藏）
        maxzoom: 24, // 最大层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时，layer 将被隐藏）
        layout: {
          // 布局类属性
          visibility: 'visible', // 可见性（可选，可选值为 none、visible，默认值为 visible）
        },
        paint: {
          // 绘制类属性
          'raster-opacity': 1, // 图片的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
          'raster-hue-rotate': 0, // 在色轮上旋转色相的角度（可选，默认值为 0，单位：角度）
          'raster-brightness-min': 0, // 图片的最小亮度（可选，取值范围为 0 ~ 1，默认值为 0）
          'raster-brightness-max': 1, // 图片的最大亮度（可选，取值范围为 0 ~ 1，默认值为 1）
          'raster-saturation': 0, // 图片的饱和度（可选，取值范围为 -1 ~ 1，默认值为 0）
          'raster-contrast': 0, // 图片的对比度（可选，取值范围为 -1 ~ 1，默认值为 0）
          'raster-resampling': 'linear', // 采样方式（可选，可选值为 linear、nearest，默认值为 linear）
          'raster-fade-duration': 300, // 切换瓦片时的渐隐时间（可选，默认值为 300，单位：毫秒）
        },
      });
    }
  }
};

// 设置某一块小班位置
const changeXbLayer = (json, isShow) => {
  let map = GET_MAPBOX_MAP();
  let source = map.getSource(xBLayerName);

  if (source) {
    source.setData(json);
  } else {
    map.addSource(xBLayerName, { type: 'geojson', data: json });
    map.addLayer({
      id: xBLayerName, // 唯一 id （必填）
      type: 'fill', // 类型（必填）
      source: xBLayerName, // 数据源的名称（除了 layer 的 type 为 background 外，source 必填）
      minzoom: 0, // 最小层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时，layer 将被隐藏）
      maxzoom: 24, // 最大层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时，layer 将被隐藏）
      paint: {
        // 绘制类属性
        'fill-antialias': true, // 填充时是否反锯齿（可选，默认值为 true）
        'fill-opacity': 0.51, // 填充的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
        'fill-pattern': '', // 填充用的图案（可选，这里填写在 sprite 雪碧图中图标名称。为了图案能无缝填充，图标的高宽需要是 2 的倍数）
        'fill-color': 'yellow', // 填充的颜色（可选，默认值为 #000000。如果设置了 fill-pattern，则 fill-color 将无效）
        'fill-outline-color': 'yellow', // 描边的颜色（可选，默认和 fill-color 一致。如果设置了 fill-pattern，则 fill-outline-color 将无效。为了使用此属性，还需要设置 fill-antialias 为 true）
        'fill-translate': [0, 0], // 填充的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
        'fill-translate-anchor': 'map', // 平移的锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
      },
    });
  }

  map.fitBounds(turfBbox(json), { padding: 100, maxZoom: 18, duration: 1000 });
};

// 跳转至某个小班
const handleTo = (row) => {
  let res = resultFeatures.value[checked.value];

  if (res?.features?.length) {
    let target = res.features[row.rowIndex];

    changeXbLayer(target);
  }
};

// 关闭
const handleCloseModule = () => {
  emit('close');
};

const exportDataEvent = async () => {
  return ElMessage.warning('开发中。。。');
  // let columnsVal = [];

  // columns.value.map((item) => {
  //   const info = {};

  //   info['title'] = item;
  //   info['dataIndex'] = item;

  //   columnsVal.push(info);
  // });

  // await exportExcel(columnsVal, [], dataSource.value, '属性查询');
};

// tabs 切换
const handleTabs = (index) => {
  isShow.value = false;

  const { columns: arr, tableData, url } = resultFeatures.value[index] || {};

  checked.value = index;
  columns = [
    {
      key: 'operations',
      title: 'Operations',
      cellRenderer: (row) => (
        <div onClick={() => handleTo(row)}>
          <ElButton size="small">定位小班</ElButton>
        </div>
      ),
      width: 150,
      align: 'center',
    },
    ...arr,
  ];
  dataSource = tableData;
  nextTick(() => {
    isShow.value = true;
    changeBaseLayer(url, dataSource.length);
  });
};

onMounted(() => {
  columns = [
    {
      key: 'operations',
      title: '操作',
      cellRenderer: (row) => (
        <div onClick={() => handleTo(row)}>
          <ElButton size="small">定位小班</ElButton>
        </div>
      ),
      width: 150,
      align: 'center',
    },
    ...resultFeatures.value[0].columns,
  ];
  dataSource = resultFeatures.value[0].tableData;
  isShow.value = true;
  checked.value = 0;
  nextTick(() => {
    changeBaseLayer(resultFeatures.value[0].url, resultFeatures.value[0].tableData.length);
  });
});
onBeforeUnmount(() => {
  let map = GET_MAPBOX_MAP();

  [BaseLayerName, xBLayerName].map((item) => {
    let source = map.getSource(item);

    if (source) {
      map.removeLayer(item);
      map.removeSource(item);
    }
  });
});
</script>
<template>
  <div v-if="polygonShow" class="att_point1_root">
    <header>
      <div class="left_header">
        <div v-for="(item, i) in resultFeatures" :key="item.name" class="title" @click="handleTabs(i)">
          <div :checked="i == checked">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="right_header">
        <ElButton type="primary" @click="exportDataEvent">导出表格数据</ElButton>

        <ElIcon class="root_icon_close" @click="handleCloseModule">
          <CloseBold />
        </ElIcon>
      </div>
    </header>

    <main>
      <div class="main_table">
        <ElAutoResizer>
          <template #default="{ height, width }">
            <ElTableV2
              v-if="isShow"
              :columns="columns"
              :data="dataSource"
              :width="width"
              :height="height"
              :estimated-row-height="50"
              :row-height="50"
              :fixed-table-height="50"
              fixed
            >
            </ElTableV2>
          </template>
        </ElAutoResizer>
      </div>
    </main>
  </div>
</template>

<style scoped lang="scss">
.att_point1_root {
  position: fixed;
  right: 5px;
  bottom: 1px;
  left: 5px;
  z-index: 9999;
  height: 286px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  box-shadow: 0px 0px 0.9px rgba(0, 0, 0, 0.02), 0px 0px 2.1px rgba(0, 0, 0, 0.028), 0px 0px 3.9px rgba(0, 0, 0, 0.035),
    0px 0px 6.9px rgba(0, 0, 0, 0.042), 0px 0px 13px rgba(0, 0, 0, 0.05), 0px 0px 31px rgba(0, 0, 0, 0.07);
  transition: bottom 1.5s;

  header {
    display: flex;
    justify-content: space-between;
    height: 47px;
    padding: 10px 16px;
    color: #ffffff;
    border-bottom: 1px solid rgba(232, 231, 229, 0.5);
    .left_header {
      display: flex;
      flex: auto;
    }
    .title {
      flex: auto;
      height: 50px;
      font-weight: 600;
      font-size: 18px;
      letter-spacing: 1px;
      text-align: center;

      > div {
        width: 150px;
        height: 30px;
        padding: 0 5px;
        overflow: hidden;
        line-height: 30px;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-radius: 5px;
      }
      > div[checked='true'] {
        background-color: #387dfb;
      }
    }

    .right_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 200px;
    }

    .root_icon_close {
      width: 29px;
      height: 29px;
      margin-left: 20px;
      color: #ffffff;
      font-size: 20px;
      cursor: pointer;
      :hover {
        color: #387dfb;
      }
    }
  }

  main {
    height: calc(100% - 50px);
    padding: 10px;
    .main_table {
      width: 100%;
      height: 100%;
      .table_border {
        width: 100%;
        height: 250px;
        border-radius: 4px;
      }
      :deep(.el-table-v2__table) {
        --el-table-row-hover-bg-color: none;
        color: #fff;
        background: rgba(0, 0, 0, 0.1) !important;
        .el-table-v2__row {
          color: #fff;
        }
        .el-table-v2__header-cell {
          color: #fff;
          background: rgba(0, 0, 0, 0.1) !important;
        }
      }
      :deep(.el-table-v2__empty) {
        .el-empty__image {
          width: 50px;
        }
      }
      :deep(.el-table) {
        --el-table-row-hover-bg-color: none;
        background: rgba(0, 0, 0, 0.1) !important;
      }
      :deep(.el-table__empty-text) {
        color: #ffffff !important;
      }

      :deep(.el-table th.el-table__cell) {
        background: rgba(0, 0, 0, 0.1) !important;
      }
      :deep(.el-table tr) {
        color: #fff;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.1) !important;
      }
      :deep(.el-table__header tr) {
        background: rgba(192, 191, 191, 0.2) !important;
      }
    }
  }
}
</style>
